<%@page import="com.sun.star.util.URL"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>后台登录</title>
<meta name="author" content="DeathGhost" />
<link rel="stylesheet" type="text/css" href="css/style.css" tppabs="css/style.css" />
<style>
body{height:100%;background:#16a085;overflow:hidden;}
canvas{z-index:-1;position:absolute;}



.alert {
      position: fixed;
      top: 25%;
      left: 50%;
      font-weight: bold;
      transform: translateX(-50%);
      background-color: #f2e6ff;
      color: #4a235a;
      padding: 15px;
      border-radius: 5px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      display: none;
      transition: opacity 0.5s ease-in-out;
    }

</style>
<script src="js/jquery.min.js"></script>
<script src="js/login/verificationNumbers.js" tppabs="js/verificationNumbers.js"></script>
<script src="js/login/Particleground.js" tppabs="js/Particleground.js"></script>
<script>

	$(function() {
		var element = document.getElementById('alertBox');
		if (element) {
			showAlert();
		} else {
		    console.log('Element with ID "yourElementId" does not exist.');
		}
	}); 


$(document).ready(function() {
  //粒子背景特效
  $('body').particleground({
    dotColor: '#5cbdaa',
    lineColor: '#5cbdaa'
  });
  //验证码
/*   createCode(); */
  //测试提交，对接程序删除即可
  $(".submit_btn").click(function(){
	  /*location.href="javascrpt:;"/*tpa=http://***index.html*/;
	  
	  var form = document.getElementById('form_login');
	  
	  // 创建一个FormData对象来存储表单数据
	  var formData = new FormData(form);
	 
	  // 创建一个XMLHttpRequest对象
	  var xhr = new XMLHttpRequest();
	 
	  // 配置请求：使用POST方法，设置请求的URL（后台处理表单数据的端点）
	  xhr.open('POST', '/login/login', true);
	 
	  // 设置请求头（如果需要的话，比如Content-Type对于FormData通常是自动设置的）
	  // xhr.setRequestHeader('Content-Type', 'multipart/form-data'); // 这行通常不需要，因为FormData会自动设置
	 
	  // 定义请求完成时的回调函数
	  xhr.onload = function() {
	    if (xhr.status === 200) {
	      // 请求成功，处理响应数据
	      console.log('Form submitted successfully!');
	      console.log(xhr.responseText); // 这里假设服务器返回的是文本数据
	      // 如果服务器返回的是JSON数据，你可以使用JSON.parse(xhr.responseText)来解析它
	      location.reload();
	    } else {
	      // 请求失败，处理错误情况
	      console.error('Form submission failed with status:', xhr.status);
	    }
	  };
	 
	  // 定义请求出错时的回调函数
	  xhr.onerror = function() {
	    console.error('An error occurred during the AJAX request.');
	  };
	 
	  // 发送请求，带上表单数据
	  xhr.send(formData);
	  
	  });
});


document.addEventListener('DOMContentLoaded', () => {
    const loginButton = document.getElementById('loginButton');

    // 监听整个文档的键盘事件
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            // 确保用户名和密码输入框都有值
                e.preventDefault(); // 阻止默认行为
                loginButton.click(); // 模拟按钮点击
        }
    });

});
</script>
</head>
<body>
 <c:if test="${not empty loginInfo}">
<div id="alertBox" class="alert">${loginInfo }</div>
 </c:if>
 

<dl class="admin_login">
 <dt>
  <strong>站点后台管理系统${loginInfo}</strong>
  <em>Management System</em>
 </dt>
 <form id="form_login" method="post">
 <dd class="user_icon">
  <input type="text" placeholder="账号/手机号码/邮箱" name="username" class="login_txtbx"/>
 </dd>
 <dd class="pwd_icon">
  <input type="password" placeholder="密码" name=password class="login_txtbx"/>
 </dd>
 <c:if test="${isCheck > 3 }">
 <dd class="val_icon">
  <div class="checkcode" style="display: flex;">
    <input type="text" id="J_codetext" placeholder="输入验证码" name="check_text"  class="login_txtbx">
    <%--  <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>  --%>
  <img id="vc_img" alt="" src="/login/VC" onclick="on_img()">
  
  </div>
  <input type="button" value="刷新验证码" class="ver_btn" onClick="on_img();">
 </dd>
 </c:if>
 <dd>
  <input id="loginButton" type="button" value="立即登陆" class="submit_btn"/>
 </dd>
 </form>
 
 <dd>
  <p>© 2015-2016 jq22 版权所有</p>
  <p>陕B2-8998988-1</p>
 </dd>
</dl>
</body>
</html>

<script>

function showAlert() {
    var alertBox = document.getElementById('alertBox');
//    alertBox.textContent = '这是一个提示！';
    alertBox.style.display = 'block';

    //3秒后隐藏提示框
    setTimeout(function() {
      alertBox.style.opacity = '0';
      setTimeout(function() {
        alertBox.style.display = 'none';
        alertBox.style.opacity = '1';
      }, 500);
    }, 3000);
  }



function on_img() {
	document.getElementById('vc_img').src='/login/VC?'+Math.random();
}

</script>
